<script setup lang="ts">
// @ts-ignore
import { getEmployeesListApi, delEmployeeApi } from '@/api/employees'
import { ref, onMounted } from 'vue'
// @ts-ignore
import type { PageParams, EmployeeResult } from '@/types/employees'
import PaginationIndex from '../Setting/components/PaginationIndex.vue'
import dayjs from 'dayjs'
import { ElMessageBox, ElMessage } from 'element-plus'
// @ts-ignore
import addEmployee from './components/add-employee.vue'
// @ts-ignore
import assignRole from './components/assignRole.vue'

// loading 加载效果
const loading = ref(false)

const result = ref<EmployeeResult>()
// 准备分页参数
const pageParams = ref<PageParams>({
  page: 1,
  size: 10
})
// 获取员工数据
const getEmployeesList = async () => {
  loading.value = true
  const res = await getEmployeesListApi(pageParams.value)
  result.value = res.data
  loading.value = false
}

// 计算每页数据的序号
const indexMethod = (index: number) => {
  return (pageParams.value.page - 1) * pageParams.value.size + index + 1
}

//处理聘用形式
const formatFormOfEmployee = (type: 1 | 2): string => {
  const Map = {
    1: '正式',
    2: '非正式'
  }
  return Map[type]
}
//处理日期  基于 dayjs 格式化数据
const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD')
}

// 删除员工
const delEmployee = async (id: number) => {
  // 提示用户 是否要删除
  await ElMessageBox.confirm('此操作将永久删除该文件，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  // 调用删除接口
  await delEmployeeApi(id)
  // 提示用户 删除成功
  ElMessage.success('删除成功')
  // 判断删除的数据是不是最后一页的最后一条数据
  if (pageParams.value.page > 1 && result.value?.rows.length === 1) {
    pageParams.value.page--
  }
  // 重新获取数据
  getEmployeesList()
}

// 新增员工
const addEmployeeRef = ref<InstanceType<typeof addEmployee> | null>(null)
const addEmployeeFn = () => {
  addEmployeeRef.value?.showDialogFn()
}

// 更新数据 子组件更新数据
const updataList = () => {
  // 重新渲染最后一页数据
  pageParams.value.page = Math.ceil(result?.value?.total! / pageParams.value.size)
  getEmployeesList()
}

// 分配角色权限 弹框的显示和隐藏
const userId = ref('')
const assignRoleRef = ref<InstanceType<typeof assignRole>>()
const assignRoleFn = (id: string) => {
  assignRoleRef.value?.showDialogFn()
  userId.value = id
}

onMounted(() => {
  getEmployeesList()
})
</script>

<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- PageTools 全局组件 无需再次引入 -->
      <page-tools>
        <template #left>
          <span>总记录数: {{ result?.total }} 条</span>
        </template>
        <template #right>
          <!-- <el-button type="warning">excel导入</el-button>
          <el-button type="danger">excel导出</el-button> -->
          <el-button type="primary" @click="addEmployeeFn">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px">
        <el-table border :data="result?.rows" v-loading="loading">
          <el-table-column label="序号" type="index" :index="indexMethod" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="{ row }">
              {{ formatFormOfEmployee(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry">
            <template #default="{ row }">
              {{ formatTime(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{ row }">
              <!-- <el-button type="primary">查看</el-button> -->
              <el-button type="success" @click="assignRoleFn(row.id)">分配角色</el-button>
              <el-button type="danger" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 pagination -->
        <pagination-index
          v-if="result?.total"
          v-model:currentPage="pageParams.page"
          v-model:pageSize="pageParams.size"
          :total="result.total"
          @update:currentPage="getEmployeesList"
          background
          layout="prev, pager, next"
          style="margin-top: 40px; justify-content: center"
        ></pagination-index>
      </el-card>

      <!-- dialog 弹框 添加 编辑 -->
      <add-employee ref="addEmployeeRef" @updataList="updataList"></add-employee>
      <!-- dialog 弹框 分配权限 -->
      <assign-role ref="assignRoleRef" :userId="userId"></assign-role>
    </div>
  </div>
</template>
<style scoped></style>
